<template>
	<view :data-theme="theme()" :class="theme() || ''" class="coupon_bg" v-if="!loading">
		<view class="coupon_bg"></view>
		<view class="coupon-detail-top">
			<view class="top_box">
				<view>
					<text class="icon iconfont icon-dianpu1" style="color: #fff; font-size: 32rpx"></text>
					<text class="white fb f32 ml10">{{
            detail.supplier ? detail.supplier.name : "平台通用"
          }}</text>
				</view>
				<view class="item-wrap">
					<view :class="'coupon-item coupon-item-' + detail.colorText">
						<view class="operation d-b-c w-b">
							<view class="flex-1 coupon-content">
								<view class="mb20 text-ellipsis">
									<text class="f40 fb">{{ detail.name }}</text>
								</view>
								<view class="f22 gray9 mb20">
									<template v-if="detail.expireType == 10">
										有效期：领取{{ detail.expireDay }}天内有效
									</template>
									<template v-if="detail.expireType == 20">
										有效期：{{ detail.startTimeText }}至{{ detail.endTimeText }}
									</template>
								</view>
								<view v-if="detail.bigPrice != 0" class="f22">(最大优惠{{ detail.bigPrice }}元)</view>
							</view>
							<view class="right-box d-c-c d-c">
								<view class="theme-price mb10" v-if="detail.couponType == 10">
									<text class="f24">￥</text>
									<text class="f52 fb">{{ detail.reducePrice * 1 }}</text>
								</view>
								<view class="mb10 theme-price" v-if="detail.couponType == 20">
									<text class="f52 fb">{{ detail.discount / 10 }}</text>
									<text class="f24">折</text>
								</view>
								<view class="f24 mb10">{{
                  detail.minPrice > 0
                    ? "满" + detail.minPrice * 1 + "元可用"
                    : "无门槛"
                }}</view>
								<view v-if="detail.state.value == 1" class="f26 coupon-btn theme-btn"
									@click="receiveCoupon()">领取</view>
								<button type="default" v-else class="f26 coupon-btn btn-gray white"
									@click="receiveCoupon()">
									{{ detail.state.text }}
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template v-if="applyRange != 10">
				<view class="white f30 fb d-c-c">
					<text class="ml10 mr10 title-text">指定以下商品使用</text>
				</view>
				<!-- 商品列表 -->
				<view class="o-h pro_list d-b-c f-w">
					<view class="pro_item" v-for="(item, index) in listData" :key="index" @click="
              gotoPage(
                '/pages/product/detail/detail?productId=' + item.productId
              )
            ">
						<image class="pro_item_image" :src="item.productImage || '/static/default.png'"
							mode="aspectFill"></image>
						<view class="product-info">
							<view class="f28 gray3 text-ellipsis">{{
                item.productName
              }}</view>
							<view class="f22 gray9 mt10 mb10">累计成交：{{ item.productSales }}笔</view>
							<view class="f24">
								<text class="f24 theme-price">￥</text><text
									class="f32 fb theme-price">{{ item.productPrice }}</text>
								<text class="gray9 text-d-line" v-if="item.linePrice >0">￥{{ item.linePrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30 ww100" v-if="listData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				loading: true,
				statusBarHeight: 0,
				titleBarHeight: 0,
				titleHeight: 0,
				opacity: 0,
				couponId: 0,
				listData: [],
				detail: {
					state: {
						value: 0,
						text: "",
					},
				},
				applyRange: 10,
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 10,
				no_more: false,
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.listData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			},
		},
		onPageScroll(e) {
			if (e.scrollTop < 100) {
				this.opacity = e.scrollTop / 100;
			} else {
				this.opacity = 1;
			}
		},

		onLoad(e) {
			this.couponId = e.couponId;
			this.applyRange = e.applyRange;
		},
		onShow() {
			this.page = 1;
			this.listData = [];
			/*获取数据*/
			this.getData();
		},

		methods: {
			getData() {
				let self = this;
				self.loading = true;
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					couponId: self.couponId,
				};
				if (self.applyRange != 20) {
					params.pageIndex = self.page || 1;
					params.PageSize = self.list_rows;
				}
				self._get("coupon/coupon/detail", params, function(res) {
					uni.hideLoading();
					self.loading = false;
					self.detail = res.data;
					if (self.detail.applyRange == 20) {
						self.listData = res.data.productList;
					} else if (self.detail.applyRange == 30) {
						self.listData = self.listData.concat(res.data.productList);
						// self.last_page = res.data.productList;
						// if (res.data.productList.last_page <= 1) {
						// 	self.no_more = true;
						// }
					}
				});
			},
			receiveCoupon() {
				let self = this;
				if (self.detail.state.value == 0) {
					return false;
				}
				self._post(
					"user/coupon/receive", {
						couponId: self.detail.couponId,
					},
					function(result) {
						uni.showToast({
							title: "领取成功",
							icon: "success",
							mask: true,
							duration: 2000,
						});
						self.detail.state.value = 0;
						self.detail.state.text = "已领取";
					}
				);
			},
			goback() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {}

	.coupon_bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 0;
		width: 750rpx;
		height: 1134rpx;
		background: linear-gradient(-180deg, #394263 0%, rgba(255, 255, 255, 0) 100%);
	}

	.top_box {
		padding: 32rpx 20rpx 30rpx 20rpx;
	}

	.coupon-wrap {
		padding: 30rpx;
	}

	.coupon-detail-top {
		position: relative;
		z-index: 1;
	}

	.item-wrap {
		margin: 0;
		margin-top: 30rpx;
	}

	.coupon-item .btns button {
		border: none;
	}

	.coupon-item .circles text {
		display: block;
		width: 10rpx;
		height: 20rpx;
		background: linear-gradient(0deg, #fffdd7 0%, #fee6df 100%);
		border-radius: 0 10rpx 10rpx 0;
	}

	.coupon-item .info::before,
	.coupon-item .info::after {
		background: linear-gradient(0deg, #fffdd7 0%, #fee6df 100%);
	}

	.decorate {
		width: 16rpx;
		height: 16rpx;
	}

	.pro_list {
		padding: 0 20rpx;
		padding-bottom: 80rpx;
		padding-top: 40rpx;
	}

	.pro_item {
		width: 342rpx;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #ffffff;
		margin-bottom: 12rpx;
	}

	.pro_item_image {
		width: 304rpx;
		height: 304rpx;
		display: block;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 12rpx;
		border-radius: 15rpx;
	}

	.head_top {
		position: relative;
		line-height: 30px;
		color: #ffffff;
		font-size: 32rpx;
	}

	.reg180 {
		padding-right: 20rpx;
		text-align: right;
		transform: rotateY(180deg);
		position: absolute;
		bottom: 0;
		height: 100%;
		display: flex;
		align-items: center;
		left: 0;
	}

	.icon-jiantou {
		color: #333333;
		font-size: 32rpx;
	}

	.product-info {
		padding: 0 20rpx 30rpx 20rpx;
	}

	.title-text {
		position: relative;
	}

	.title-text::after,
	.title-text::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 40rpx;
		height: 2rpx;
		background: #ffffff;
		z-index: 1;
	}

	.title-text::after {
		left: -60rpx;
	}

	.title-text::before {
		right: -60rpx;
	}
</style>